<template>
  <div class="share">
    <div class="topheader"> 
           <a-icon type="left" @click="$router.go(-1)" />
           <p>我的分享</p>
            <button @click="fabiao()">发表</button> 
        </div>
   
      <div class="content">
           <div class="image">
      <img :src="img" id="image" alt="" width="300px" />
      <input type="file" id="file" name="file" />
      <input type="button" value="上传" @click="uploadFile" />
    </div>
        <div class=content1>
              <el-input
            type="textarea"
            :rows="5"
            placeholder="记录我的厨艺时刻~"
             v-model="textarea">
            </el-input>
        </div>
      
    
      </div>
   
   
  </div>
</template>

<script>

import QS from "qs";
import $ from 'jquery'
export default {
  
  data() {
    return {
      textarea: '',
      img:require('../assets/imgs/service/上传图片.png')
    };
  },
  methods: {
       fabiao() {
      let params={
        img:this.hrr,
        content:this.textarea,
        user_id:localStorage.id
      }
          this.$http
            .post("/mysql/share.php", QS.stringify(params))
            .then((result) => {
              console.log(result)
              this.$router.push({name:'Home'})
            })
            .catch((err) => {
              console.log(err);
            });
    
    },
    uploadFile() {
      var hrr = "";

      const self = this;

      var file = document.getElementById("file").files[0]; //图片上传
      if (file == null || file == "") {
        alert("请选择要上传的图片！");
        return false;
      }
      var formData = new FormData();
      formData.append("file", file); //添加一个新值到FormData对象内的一个已存在的键中，如果键不存在则会添加该键
      $.ajax({
        url: "http://localhost/mysql/Upload.php", //目标
        type: "POST", //传值方式
        data: formData,
        dataType: "text", //返回类型
        async: false, //异步传输
        contentType: false, //告诉jQuery不要去设置Content-Type请求头
        cache: false, //每次读取的是最新的数据
        processData: false, //告诉jQuery不要去处理发送的数据
        success(res) {
          $("#image").attr("src", res); //对图片路径进行赋值
          self.hrr = res;
          this.img = self.hrr
        },
      });

      console.log(typeof this.hrr);
    },
   
 
  },
 
};
</script>
<style lang="scss" scoped>
.share{
    
      position: relative;
    width: 100%;
    height: 100vh;
    overflow: auto;
 
  .topheader{
   padding-right: 10px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i{
        font-size: 18px;    
    }
    p{
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 0;
    }
    button{
      
      width: 80px;
      height: 35px;
      background:rgb(159, 211, 167);
      color: white;
      border:0;
    }
  }
  .image{
  margin-top: 30px;
  padding:15px;
  height: 12rem;
  background-color: white;
  text-align: center;
  img{
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    
    border-radius: 10px;
  }
  
}
}
 .share{
        margin: 0 10px 0 10px;
    }
    .top{
        margin: 70px 0 20px 0;
       float:right;
      .el-button{
         font-size: 18px;
       }
       
    }
    
    .content{
        margin-top: 30px;
        border: white;
      
    }
    .content1{
      margin-top: 40px;
      margin-right: 20px;
    }
</style>